<!-- ---
layout: default
title: 基础
slug: basic
lead: "了解ZUI设计的基础内容."
base_url: "./"
---
 -->

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">

    <title>ZUI - 开源HTML5跨屏框架</title>

    <link href="css/zui.min.css" rel="stylesheet">
    <link href="css/doc.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="../assets/html5shiv.js"></script>
    <script src="../assets/respond.js"></script>
    <![endif]-->
  </head>
  <body class="doc-basic">
    <header data-tab="basic">
    </header>
    <div id="main">
      <div class="page-header">
        <h1>基础</h1>
      </div>

      <section id="hello">
        <div class="page-header">
          <h2>Hello world</h2>
        </div>

        <p>使用ZUI进行构建现代应用非常简单。一般情况下，ZUI仅依赖于jQuery，ZUI中的Javascript组件构建于jQuery之上。</p>
        <p>下面给出一个非常简单的Hello world页面。</p>
<pre class="prettyprint">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-cn&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Hello world!&lt;/title&gt;

    &lt;!-- zui --&gt;
    &lt;link href=&quot;css/zui.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

    &lt;!-- jQuery (ZUI中的Javascript组件依赖于jQuery) --&gt;
    &lt;script src=&quot;//code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- ZUI Javascript组件 --&gt;
    &lt;script src=&quot;js/zui.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
        <p>如果你的网站需要兼容IE8，请参考“<a href="basic.html#ie">兼容IE浏览器</a>”章节。</p>
      </section>

      <section id="global">
        <div class="page-header">
          <h2>全局样式表</h2>
        </div>
        <p>ZUI使用 <a href="http://necolas.github.io/normalize.css/" target="_blank">normalize</a> 来重置样式，这样尽可能保证在所有浏览器中有一致的体验。</p>
      </section>

      <section id="ie">
        <div class="page-header">
          <h2>兼容IE浏览器</h2>
        </div>
        <p>因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI支持IE8-11。</p>

        <h3>禁用IE兼容模式</h3>
        <p>为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：</p>
<pre class="prettyprint"><code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    ...
</code></pre>
        <p>国内众多浏览器推出“高速”模式（webkit内核）和“兼容”模式（IE内核），不过默认情况下使用“兼容”模式。将一下代码加入到页面中，可以让部分国产浏览器默认采用“高速”模式渲染页面：</p>
        <pre class="prettyprint"><code>&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;</code></pre>
        <p>目前只有<a href="http://se.360.cn/v6/help/meta.html" target="_blank">360浏览器</a>支持此<code>meta</code>标签。</p>

        <h3>更古老的浏览器</h3>
        <p>针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在<code>body</code>之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问<a href="http://browsehappy.com/">browsehappy.com</a>：</p>
<pre class="prettyprint"><code>&lt;body&gt;
    &lt;!--[if lt IE 8]&gt;
        &lt;div class=&quot;alert alert-danger&quot;&gt;您正在使用 &lt;strong&gt;过时的&lt;/strong&gt; 浏览器. 是时候 &lt;a href=&quot;http://browsehappy.com/&quot;&gt;更换一个更好的浏览器&lt;/a&gt; 来提升用户体验.&lt;/div&gt;
    &lt;![endif]--&gt;
    ...
</code></pre>

        <p>因为IE8及早期版本不支持HTML5标签，所以针对IE8浏览器，我们引入html5shiv来使得HTML5标签在IE8中也能使用。在HTML文档的script区域加入以下代码（示例中html5shiv库来自maxcdn）：</p>
<pre class="prettyprint"><code>&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>

        <p>因为IE8及早期版本同样不支持media query来实现响应式布局，我们同样可以通过条件注释引入respond.js来帮助ie实现该功能。（示例中的respond.js来自maxcdn，可以和html5shiv共享同一个条件注释区域。）</p>
<pre class="prettyprint"><code>&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>
      </section>

      <section id="responsive">
        <div class="page-header">
          <h2>响应式布局 </h2>
        </div>
        <p>现代web应用应该支持响应式布局。栅格系统已提供良好的基础构建响应式布局页面，同时也提供一些辅助工具类来控制内容在不同设备的展现方式。</p>
        <p>在ZUI中提供针对4中不同尺寸的设备屏幕进行分别控制。</p>
        <table class="table">
          <thead>
            <tr>
              <th>屏幕</th>
              <th>名称</th>
              <th>尺寸</th>
            </tr>
          </thead>
          <tr>
            <td>超小屏幕（手机）</td>
            <td>xs</td>
            <td>&lt;768px</td>
          </tr>
          <tr>
            <td>小屏幕（平板）</td>
            <td>sm</td>
            <td>&gt;=768px</td>
          </tr>
          <tr>
            <td>中等屏幕（笔记本电脑）</td>
            <td>md</td>
            <td>&gt;=992px</td>
          </tr>
          <tr>
            <td>大屏幕（桌面电脑）</td>
            <td>lg</td>
            <td>&gt;=1200px</td>
          </tr>
        </table>
        <p>针对4种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。</p>
        <table class="table">
          <thead>
            <tr>
              <th></th><th>超小屏幕</th><th>小屏幕</th><th>中等屏幕</th><th>大屏幕</th>
            </tr>
          </thead>
          <tr>
            <th>.visible-xs</th><td>可见</td><td>隐藏</td><td>隐藏</td><td>隐藏</td>
          </tr>
          <tr>
            <th>.visible-sm</th><td>隐藏</td><td>可见</td><td>隐藏</td><td>隐藏</td>
          </tr>
          <tr>
            <th>.visible-md</th><td>隐藏</td><td>隐藏</td><td>可见</td><td>隐藏</td>
          </tr>
          <tr>
            <th>.visible-lg</th><td>隐藏</td><td>隐藏</td><td>隐藏</td><td>可见</td>
          </tr>
          <tr>
            <th>.hidden-xs</th><td>隐藏</td><td>可见</td><td>可见</td><td>可见</td>
          </tr>
          <tr>
            <th>.hidden-sm</th><td>可见</td><td>隐藏</td><td>可见</td><td>可见</td>
          </tr>
          <tr>
            <th>.hidden-md</th><td>可见</td><td>可见</td><td>隐藏</td><td>可见</td>
          </tr>
          <tr>
            <th>.hidden-lg</th><td>可见</td><td>可见</td><td>可见</td><td>隐藏</td>
          </tr>
        </table>
        <p>其中显示辅助类<code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code>可以组合使用，同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。</p>
        <p>ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。</p>
        <ul>
          <li><code>.visible-print</code>：在打印时显示，在浏览器正常浏览时隐藏。</li>
          <li><code>.hidden-print</code>：在浏览器正常浏览时显示，在打印时隐藏。</li>
        </ul>

        <h3>禁用响应式布局</h3>
        <p>有时你所开发应用仅针对一个设备或平台，并不需要响应式布局。即使这样，也建议你使用响应式布局，因为不需要额外的代码，而且为跨屏提供了可能性。</p>
        <p>在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能，请参考下面的建议：</p>
        <ul>
          <li>移除 <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</code> 标签，禁用移动设备缩放可视窗口尺寸。</li>
          <li>避免使用一些响应式工具类，例如<code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code>等。</li>
          <li>当使用栅格系统时避免使用 <code>.col-sm-*</code>、<code>.col-md-*</code>、<code>.col-lg-*</code>，统一使用 <code>.col-xs-*</code>。</li>
        </ul>
      </section>

      <section id="grid">
        <div class="page-header">
          <h2>栅格系统 </h2>
        </div>
        <p>采用Bootstrap3的栅格设计。具体使用参考<a href="http://v3.bootcss.com/css/#grid" target="_blank">bootstrap3-grid</a>。</p>
        <p>以下列出常用参数：</p>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th></th>
              <th>
                超小屏幕
                <small>手机 (&lt;768px)</small>
              </th>
              <th>
                小屏幕
                <small>平板 (≥768px)</small>
              </th>
              <th>
                中等屏幕
                <small>桌面显示器 (≥992px)</small>
              </th>
              <th>
                大屏幕
                <small>大桌面显示器 (≥1200px)</small>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="text-nowrap">栅格系统行为</th>
              <td>总是水平排列</td>
              <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
            </tr>
            <tr>
              <th class="text-nowrap"><code>.container</code> 最大宽度</th>
              <td>None （自动）</td>
              <td>750px</td>
              <td>970px</td>
              <td>1170px</td>
            </tr>
            <tr>
              <th class="text-nowrap">类前缀</th>
              <td><code>.col-xs-</code></td>
              <td><code>.col-sm-</code></td>
              <td><code>.col-md-</code></td>
              <td><code>.col-lg-</code></td>
            </tr>
            <tr>
              <th class="text-nowrap">列（column）数</th>
              <td colspan="4">12</td>
            </tr>
            <tr>
              <th class="text-nowrap">最大列（column）宽</th>
              <td class="text-muted">自动</td>
              <td>~62px</td>
              <td>~81px</td>
              <td>~97px</td>
            </tr>
            <tr>
              <th class="text-nowrap">槽（gutter）宽</th>
              <td colspan="4">30px （每列左右均有 15px）</td>
            </tr>
            <tr>
              <th class="text-nowrap">可嵌套</th>
              <td colspan="4">是</td>
            </tr>
            <tr>
              <th class="text-nowrap">偏移（Offsets）</th>
              <td colspan="4">是</td>
            </tr>
            <tr>
              <th class="text-nowrap">列排序</th>
              <td colspan="4">是</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section id="typography">
        <div class="page-header">
          <h2>排版 </h2>
        </div>
        <h3>字体</h3>
        <p>在ZUI中我们定义了三种字体家族已适应不同的场合。这些字体在中英文环境下都能够很好的显示。</p>
        <table class="table">
          <tr>
            <th>无衬线字体</th>
            <td><code>&quot;Helvetica Neue&quot;, Helvetica, Tahoma, Arial, sans-serif</code></td>
          </tr>
          <tr>
            <th>衬线字体</th>
            <td><code>Georgia, &quot;Times New Roman&quot;, Times, serif</code></td>
          </tr>
          <tr>
            <th>等宽字体</th>
            <td><code>Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace</code></td>
          </tr>
        </table>
        <p>使用<a href="http://zh.wikipedia.org/wiki/%E7%84%A1%E8%A5%AF%E7%B7%9A%E5%AD%97%E9%AB%94">无衬线字体</a>来作为页面的默认字体，因为无衬线字体非常适合在屏幕上显示；衬线字体作为一个额外的选择，但并不推荐在小字号中使用，但可以用于特殊文字或者标题中；等宽字体用来显示程序代码。</p>
        <p>默认的字体大小为 <strong>13px</strong>，以保证在所有屏幕上都能有最佳效果。ZUI中也允许使用更小号的字体，不过不要小于 <strong>12px</strong>。默认行高为字体大小的1.38倍，一般为18px。一至六级标题的行高为字体大小的1.2。</p>
        <h3>文字排版</h3>
        <p>字是组成页面的重要内容，一个好的排版是构建好的用户界面的基石。应根据我们的设计原则来进行文字排版。下表中列举了web设计时会用到的文字排版方式。</p>
        <table class="table">
          <tbody>
            <tr>
              <th style="width:30%">元素</th>
              <th>标签</th>
              <th>字体大小</th>
              <th>说明</th>
            </tr>
            <tr>
              <td>
                <h1>页面标题</h1>
              </td>
              <td><code>&lt;h1&gt;</code></td>
              <td>26px</td>
              <td>在一个页面只有一个页面标题。</td>
            </tr>
            <tr>
              <td><h2>标题</h2></td>
              <td><code>&lt;h2&gt;</code></td>
              <td>22px</td>
              <td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
            </tr>
            <tr>
              <td><h3>三级标题</h3></td>
              <td><code>&lt;h3&gt;</code></td>
              <td>16px 粗体</td>
              <td>页面第三级标题，嵌套在二级标题下使用。</td>
            </tr>
            <tr>
              <td><h4>四级标题</h4></td>
              <td><code>&lt;h4&gt;</code></td>
              <td>15px 粗体</td>
              <td>页面第四级标题，嵌套在三级标题下使用。</td>
            </tr>
            <tr>
              <td><h5>五级标题</h5></td>
              <td><code>&lt;h5&gt;</code></td>
              <td>13px 粗体 颜色灰色</td>
              <td>页面第五级标题，嵌套在四级标题下使用。</td>
            </tr>
            <tr>
              <td><h6>六级标题</h6></td>
              <td><code>&lt;h6&gt;</code></td>
              <td>12px 粗体 颜色灰色</td>
              <td>页面第六级标题，嵌套在五级标题下使用。</td>
            </tr>
            <tr>
              <td><p>这是一个段落</p></td>
              <td><code>&lt;p&gt;</code></td>
              <td>13px</td>
              <td>正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。</td>
            </tr>
            <tr>
              <td><p class="lead">这是一个突出的段落</p></td>
              <td><code>&lt;p class="lead"&gt;</code></td>
              <td>20px</td>
              <td>突出的段落具有更大的字体，在一个段落上加<code>.lead</code>类。</td>
            </tr>
            <tr>
              <td><strong>粗体文本</strong></td>
              <td><code>&lt;strong&gt;</code></td>
              <td>13px</td>
              <td>通常粗体文本用来强调内容。</td>
            </tr>
            <tr>
              <td><em>斜体文本</em></td>
              <td><code>&lt;em&gt;</code></td>
              <td>13px</td>
              <td></td>
            </tr>
            <tr>
              <td><small>小的文本</small></td>
              <td><code>&lt;small&gt;</code></td>
              <td>12px 颜色灰色</td>
              <td>small文本字体只有正常字体大小的85%，通常为11.9px。</td>
            </tr>
            <tr>
              <td><a href="#">超链接</a></td>
              <td><code>&lt;a&gt;</code></td>
              <td>13px</td>
              <td>超链接具有不同的颜色以区别其他文本，超链接仅当鼠标悬停时会增加下划线。</td>
            </tr>
            <tr>
              <td>
                <ol>
                  <li>这是一个有序列表</li>
                  <li>包含三个列表项</li>
                  <li>作为示例</li>
                </ol>
              </td>
              <td><code>&lt;ol&gt;&lt;li&gt;...&lt;/ol&gt;</code></td>
              <td>13px</td>
              <td>当组织一些并列项目且关注项目之间顺序时可以使用有序列表。</td>
            </tr>
            <tr>
              <td>
                <ul>
                  <li>这是一个无序列表</li>
                  <li>包含三个列表项</li>
                  <li>作为示例</li>
                </ul>
              </td>
              <td><code>&lt;ul&gt;&lt;li&gt;...&lt;/ul&gt;</code></td>
              <td>13px</td>
              <td>当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。</td>
            </tr>
            <tr>
              <td>
                <blockquote>这是一大段引用内容</blockquote>
              </td>
              <td><code>&lt;blockquote&gt;</code></td>
              <td>13px</td>
              <td>用于显示一大段引用的内容。</td>
            </tr>
            <tr>
              <td>
                <q>这是内嵌的引用</q>
              </td>
              <td><code>&lt;q&gt;</code></td>
              <td>13px</td>
              <td>用于在正文行内显示引用的术语。</td>
            </tr>
            <tr>
              <td>
                <pre><code>&lt;div&gt;
        &lt;p&gt;代码区域&lt;/p&gt;
        &lt;/div&gt;</code></pre>
              </td>
              <td><code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;</code></td>
              <td>13px 等宽字体</td>
              <td>代码区域会加上方框，并使用等宽字体显示，详细代码显示规定请参见节<a href="#prettify">代码高亮</a>。</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section id='utilities'>
        <div class="page-header">
          <h2>辅助类 </h2>
        </div>
        <p>在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便，但也要避免滥用。使用之前应该了解以下要点。</p>
        <ul>
          <li>尽量少用或不用辅助类，如果有对应的控件或组件使用。</li>
          <li>当相同的场景需要大量使用辅助类时，这时应该考虑是否单独定义一个新的控件或组件。</li>
        </ul>

        <h3>小字号文本</h3>
        <p>使用标签<code>&lt;small&gt;</code>或者CSS类名<code>.small</code>来使得文本字号比正常情况小一号。</p>
        <div class="example">
          <small>小字号文本，small text.</small>
        </div>
        <pre><code>&lt;small&gt;...&lt;/small&gt;</code></pre>

        <h3>文本颜色</h3>
        <div class="example" contenteditable='true'>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur.</p>
          <p class="text-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
          <p class="text-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
          <p class="text-success">Culpa eum modi assumenda, velit vitae.</p>
          <p class="text-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
          <p class="text-info">Minus nisi consectetur dolorum temporibus architecto.</p>
          <p class="text-important">Tenetur ullam amet illo sint magni!</p>
          <p class="text-special">Sapiente voluptates debitis dolor ipsam libero!</p>
        </div>
<pre class='prettyprint'>&lt;p class="text-muted"&gt;...&lt;/p&gt;
&lt;p class="text-primary"&gt;...&lt;/p&gt;
&lt;p class="text-danger"&gt;...&lt;/p&gt;
&lt;p class="text-success"&gt;...&lt;/p&gt;
&lt;p class="text-warning"&gt;...&lt;/p&gt;
&lt;p class="text-info"&gt;...&lt;/p&gt;
&lt;p class="text-important"&gt;...&lt;/p&gt;
&lt;p class="text-special"&gt;...&lt;/p&gt;</pre>

        <h3>文本背景高亮</h3>
        <div class="example" contenteditable='true'>
          <p class="highlight-default">Lorem ipsum dolor sit amet, consectetur.</p>
          <p class="highlight-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
          <p class="highlight-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
          <p class="highlight-success">Culpa eum modi assumenda, velit vitae.</p>
          <p class="highlight-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
          <p class="highlight-info">Minus nisi consectetur dolorum temporibus architecto.</p>
          <p class="highlight-important">Tenetur ullam amet illo sint magni!</p>
          <p class="highlight-special">Sapiente voluptates debitis dolor ipsam libero!</p>
        </div>
<pre class='prettyprint'>&lt;p class="highlight-default"&gt;...&lt;/p&gt;
&lt;p class="highlight-primary"&gt;...&lt;/p&gt;
&lt;p class="highlight-danger"&gt;...&lt;/p&gt;
&lt;p class="highlight-success"&gt;...&lt;/p&gt;
&lt;p class="highlight-warning"&gt;...&lt;/p&gt;
&lt;p class="highlight-info"&gt;...&lt;/p&gt;
&lt;p class="highlight-important"&gt;...&lt;/p&gt;
&lt;p class="highlight-special"&gt;...&lt;/p&gt;</pre>

        <h3>文本背景色</h3>
        <div class="example" contenteditable='true'>
          <p class="bg-default">Lorem ipsum dolor sit amet, consectetur.</p>
          <p class="bg-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
          <p class="bg-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
          <p class="bg-success">Culpa eum modi assumenda, velit vitae.</p>
          <p class="bg-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
          <p class="bg-info">Minus nisi consectetur dolorum temporibus architecto.</p>
          <p class="bg-important">Tenetur ullam amet illo sint magni!</p>
          <p class="bg-special">Sapiente voluptates debitis dolor ipsam libero!</p>
        </div>
<pre class='prettyprint'>&lt;p class="bg-default"&gt;...&lt;/p&gt;
&lt;p class="bg-primary"&gt;...&lt;/p&gt;
&lt;p class="bg-danger"&gt;...&lt;/p&gt;
&lt;p class="bg-success"&gt;...&lt;/p&gt;
&lt;p class="bg-warning"&gt;...&lt;/p&gt;
&lt;p class="bg-info"&gt;...&lt;/p&gt;
&lt;p class="bg-important"&gt;...&lt;/p&gt;
&lt;p class="bg-special"&gt;...&lt;/p&gt;</pre>

        <h3>禁用文本换行</h3>
        <p>使所有文本在一行显示。超出的部分将会被隐藏。只需要使用<code>.text-nowrap</code>或者<code>.nobr</code>。</p>
        <pre class='prettyprint'>&lt;h2 class="text-nowrap"&gt;...&lt;/h2&gt;</pre>

        <h3>文本超出省略</h3>
        <p>使所有文本在一行显示。超出的部分会被截断，并且在文本末尾添加省略号。使用<code>.text-ellipsis</code>。</p>
        <pre class='prettyprint'>&lt;h2 class="text-ellipsis"&gt;...&lt;/h2&gt;</pre>
        <div class="alert alert-warning">
          <p>并不是所有浏览器都支持此选项。</p>
        </div>

        <h3>内容边距</h3>
        <p>在内容元素内添加内边距，使得元素更易于阅读。使用<code>.with-padding</code>。</p>
        <p>内容边距和文本背景一起使用的例子。</p>
        <div class="example" contenteditable='true'>
          <p class="with-padding bg-default">Lorem ipsum dolor sit amet, consectetur.</p>
          <p class="with-padding bg-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
          <p class="with-padding bg-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
          <p class="with-padding bg-success">Culpa eum modi assumenda, velit vitae.</p>
          <p class="with-padding bg-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
          <p class="with-padding bg-info">Minus nisi consectetur dolorum temporibus architecto.</p>
          <p class="with-padding bg-important">Tenetur ullam amet illo sint magni!</p>
          <p class="with-padding bg-special">Sapiente voluptates debitis dolor ipsam libero!</p>
        </div>
<pre class='prettyprint'>&lt;p class="with-padding bg-default"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-primary"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-danger"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-success"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-warning"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-info"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-important"&gt;...&lt;/p&gt;
&lt;p class="with-padding bg-special"&gt;...&lt;/p&gt;</pre>

        <h3>关闭按钮</h3>
        <p>通常用来关闭消息框或者模态框。</p>
        <div class="example">
          <button type="button" class="close" style="float:none"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <pre class="prettyprint"><code>&lt;button type="button" class="close"&gt;&lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;</code></pre>

        <h3>三角符号</h3>
        <div class="example"><span class="caret"></span></div>
        <pre class="prettyprint"><code>&lt;span class="caret"&gt;&lt;/span&gt;</code></pre>

        <h3>浮动</h3>
        <p>强制使得一个元素向左或者向右浮动。</p>
        <pre class="prettyprint">&lt;div class="pull-left"&gt;&lt;/div&gt;
&lt;div class="pull-right"&gt;&lt;/div&gt;</pre>
        <p>对应的CSS代码：</p>
        <pre class="prettyprint">.pull-right
{
  float: right !important;
}
.pull-left
{
  float: left !important;
}</pre>
        <h3>清除浮动</h3>
        <p>只需要一个CSS类名即可使得内部浮动元素也具备高度等特性。</p>
        <pre class="prettyprint">&lt;div class="clearfix"&gt;...&lt;/div&gt;</pre>

        <h3>块居中</h3>
        <p>使得一个具备固定宽度的能够在父级容器中居中显示。</p>
        <pre class="prettyprint">&lt;div class="center-block"&gt;...&lt;/div&gt;</pre>
        <p>对应的CSS代码：</p>
        <pre class="prettyprint">.center-block
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}</pre>
        <h3>隐藏文本</h3>
        <p>隐藏文本能够使得标签内的文本不显示，通常用于图片代替文本。</p>
        <pre class="prettyprint">&lt;h1 class="text-hide"&gt;此处文本不会显示&lt;/h1&gt;</pre>

        <h3>显示或隐藏元素</h3>
        <p>提供多个辅助类来帮助切换内容显示。</p>
        <pre class="prettyprint">.hide
{
  display: none;
}
.hidden
{
  display: none!important;
}
.show
{
  display: block;
}
.showing
{
  display: block!important;
}
.invisible
{
  visibility: hidden;
}</pre>
        <p><code>.hidden</code>和<code>.showing</code>具备更高的优先级，防止其他规则重写。<code>.invisible</code>仅仅隐藏元素，但元素内容所占的空间并不会清除。</p>
      </section>

      <section id="scrollbars">
        <div class="page-header">
          <h2>滚动条</h2>
        </div>

        <p>ZUI也针对浏览器的滚动条进行了样式优化。</p>
        <div class="alert alert-warning">
          <h4>浏览器兼容性</h4>
          <p>滚动条样式目前仅支持Webkit内核浏览器。</p>
        </div>
        <div class="example">
          <div class='panel' style="max-height: 100px; max-width:250px; overflow: scroll; scroll: both">
            <h1>滚动条样式测试</h1>
            <p>一些文字</p>
            <p>更多的文字</p>
            <p>更多的文字</p>
            <p>更多的文字</p>
            <p>长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本。</p>
            <div class='alert' style="width: 300px">
              <h4>较宽的内容。</h4>
            </div>
          </div>
        </div>
      </section>

      <section id="colorset">
        <div class="page-header">
          <h2>配色</h2>
        </div>
        <p>ZUI的界面应该简洁，易于识别，让人感觉舒适而不失严谨。所使用的配色应该尽可能达到该目的。</p>
        <p>ZUI的配色表包含三部分：主要颜色，灰度颜色及额外颜色。</p>
        <h3>主要颜色</h3>
        <p>包含3～5种颜色，决定了ZUI界面整体色调。虽然并没有强制的规则来决定如何指定主要颜色，但最好是使用同一色调的不同明度的颜色。一般选取2深色+2浅色+1强调色。主要颜色会用在菜单、导航、链接、高亮选项等。</p>
        <p>在ZUI的默认配色方案中，主要颜色均为同一色系。</p>
        <div class="colorset">
          <div class="color-primary"></div>
          <div class="color-secondary"></div>
          <div class="color-pale"></div>
          <div class="color-fore"></div>
          <div class="color-back"></div>
        </div>
        <h3>灰度颜色</h3>
        <p>灰度颜色强制使用同一色调不同亮度的一组颜色。在无特别需求的情况下，一般使用黑色灰度。灰度颜色会用在块的背景，边框，次要的文本上。灰度颜色为界面创建了层次感，加深了内容与内容间的边界，更易于体现内容的重要程度。</p>
        <div class="colorset">
          <div class="color-gray-darker"></div>
          <div class="color-gray-dark"></div>
          <div class="color-gray"></div>
          <div class="color-gray-light"></div>
          <div class="color-gray-lighter"></div>
          <div class="color-gray-pale"></div>
        </div>
        <div class="colorset">
          <div class="color-white"></div>
          <div class="color-black"></div>
        </div>
        <div class="colorset">
          <div class="color-light"></div>
          <div class="color-dark"></div>
        </div>
        <h3>额外颜色</h3>
        <p>额外的颜色为特殊控件提供的更多的色彩选择。例如各种级别的消息框，特殊作用的按钮，特殊文本等。</p>
        <div class="colorset">
          <div class="color-red"></div>
          <div class="color-yellow"></div>
          <div class="color-green"></div>
          <div class="color-blue"></div>
          <div class="color-brown"></div>
          <div class="color-purple"></div>
        </div>
        <div class="colorset">
          <div class="color-danger"></div>
          <div class="color-warning"></div>
          <div class="color-success"></div>
          <div class="color-info"></div>
          <div class="color-important"></div>
          <div class="color-special"></div>
        </div>
        <div class="colorset">
          <div class="color-success-pale"></div>
          <div class="color-warning-pale"></div>
          <div class="color-danger-pale"></div>
          <div class="color-info-pale"></div>
          <div class="color-important-pale"></div>
          <div class="color-special-pale"></div>
        </div>
        <div class="colorset">
          <div class="color-1"></div>
          <div class="color-2"></div>
        </div>
        <h3>配色设计要点</h3>
        <ul>
          <li>配色表中的每种颜色都可以在亮度上上下浮动10%左右来生成一个相近但又有些许不同的颜色作为边框及悬停渐变使用。</li>
          <li>在界面中运用的所有配色尽量使用配色表中已列明的颜色；</li>
          <li>优先使用主要颜色和灰度颜色，仅在特殊的按钮或消息时才使用额外颜色；</li>
        </ul>
      </section>

      <section id="themes">
        <div class="page-header">
          <h2>主题 <span class="label label-badge label-primary" title="" data-original-title="主题兼容标准版">ZUI</span> <span class="label label-badge label-info" title="" data-original-title="主题兼容简洁版">ZUI.LITE</span></h2>
        </div>

        <p>ZUI中力求界面元素令人赏心悦目。不过如果你需要更多的个性化设置，这时你可以充分利用ZUI提供的主题样式表来个大换装。你只需要修改dist目录下的<code>theme.css</code>文件，并增加到你的项目引用中即可，不需要对原有文件做出修改。</p>
        <p>如果你追求更深度的定制，可能需要了解<code>src/less</code>目录下的<code>theme.less</code>文件。修改这个文件也是非常简单，如果你只需要更换一下配色，那是简单不过，只需要将<code>@color-primary</code>变量设置一个新的值然后重新编译即可。</p>
        <div class="alert alert-info">
          在<code>theme.less</code>给出主要色彩值（<code>@color-primary</code>）会自动计算该色彩对应的配色方案。
        </div>
        <div class="example">
          <button type="button" class="btn btn-success" id="changeTheme">立即换装</button>
        </div>
      </section>
    </div>

    <script src="../assets/jquery.js"></script>
    <script src="../dist/js/zui.min.js"></script>
    <script src="../assets/google-code-prettify/prettify.js"></script>
    <script src="js/doc.js"></script>

  <script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53781622-1', 'auto');
  ga('send', 'pageview');
</script>
  </body>
</html>

